<template>
  <div class="am">
    <van-nav-bar :title="data.header" left-arrow @click-left="onClickLeft" />
    <div class="am-body">
      <div class="am-list">
        <div
          v-for="(item, index) of data.list"
          class="am-list-item"
          :key="index"
        >
          <div @click="handleClick(item.directTo)">
            <span>{{ item.text }}</span>
            <van-icon
              class="account-icon"
              name="arrow"
              color="#999"
              size="20"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCurrentInstance } from "vue";
export default {
  setup() {
    const { ctx, proxy } = getCurrentInstance();
    function handleClick(val) {
      ctx.$router.push(val);
    }
    function onClickLeft() {
      window.history.length > 1
        ? proxy.$router.go(-1)
        : proxy.$router.push("/manage/home");
    }
    return {
      handleClick,
      onClickLeft,
    };
  },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.am {
  &-list {
    margin: $margin-verticle;
    background-color: $theme-color3;
    border-radius: $border-radius;
    &-item {
      padding: $margin-mini;
    }
  }
}
</style>
